<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col class="home-col" :xs="24" :sm="12" :md="8" :lg="6">
        <CommonCard title="今日销售额" value="303,467,99">
          <div class="card-svg">
            日同比<b> -19.16%</b>
            <svg
              t="1664190209559"
              class="icon card-svg"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3910"
              width="14"
              height="14"
            >
              <path
                d="M861.417121 738.727375c41.604731 0 65.233383-54.963795 34.928639-85.258218L547.071415 304.191372c-20.029996-20.031716-49.822121-20.031716-69.853837 0L127.955275 653.469157c-31.085714 31.073673-5.136514 85.258218 35.441258 85.258218L861.417121 738.727375 861.417121 738.727375z"
                p-id="3918"
                fill="#008000"
              ></path>
            </svg>
          </div>
          <br />
          <div class="card-svg">
            月同比<b> 56.67%</b>
            <svg
              t="1664181910518"
              class="icon card-svg"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2971"
              width="14"
              height="14"
            >
              <path
                d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z"
                p-id="2972"
                fill="#d81e06"
              ></path>
            </svg>
          </div>
          <template #footer>昨日销售额<b> ¥ 360,000,00</b></template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="8" :lg="6">
        <CommonCard title="今日订单" value="256,206,1">
          <LineChart></LineChart>
          <template #footer>昨日订单量<b> ¥ 210,000,0</b></template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="8" :lg="6">
        <CommonCard title="今日交易用户数" value="182,425">
          <BarChart></BarChart>
          <template #footer>退货率<b> 5.91%</b></template>
        </CommonCard>
      </el-col>
      <el-col class="home-col" :xs="24" :sm="12" :md="8" :lg="6">
        <CommonCard title="累计用户数" value="117,796,5">
          <ProgressChart></ProgressChart>
          <template #footer>
            日同比<b> 17.70%</b>
            <div class="card-svg">
              <svg
                t="1664190209559"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3910"
                width="14"
                height="14"
              >
                <path
                  d="M861.417121 738.727375c41.604731 0 65.233383-54.963795 34.928639-85.258218L547.071415 304.191372c-20.029996-20.031716-49.822121-20.031716-69.853837 0L127.955275 653.469157c-31.085714 31.073673-5.136514 85.258218 35.441258 85.258218L861.417121 738.727375 861.417121 738.727375z"
                  p-id="3918"
                  fill="#008000"
                ></path>
              </svg>
            </div>

            月同比<b> 47.12%</b>
            <div class="card-svg">
              <svg
                t="1664181910518"
                class="icon card-svg"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2971"
                width="14"
                height="14"
              >
                <path
                  d="M482.133333 738.133333L136.533333 392.533333c-17.066667-17.066667-17.066667-42.666667 0-59.733333 8.533333-8.533333 19.2-12.8 29.866667-12.8h689.066667c23.466667 0 42.666667 19.2 42.666666 42.666667 0 10.666667-4.266667 21.333333-12.8 29.866666L541.866667 738.133333c-17.066667 17.066667-42.666667 17.066667-59.733334 0z"
                  p-id="2972"
                  fill="#d81e06"
                ></path>
              </svg>
            </div>
          </template>
        </CommonCard>
      </el-col>
    </el-row>
    <Sales></Sales>
    <PieChart></PieChart>
    <BMap></BMap>
    <ChinaMap></ChinaMap>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>
<script lang="ts" setup>
import CommonCard from "@/views/home/components/CommonCard";
import LineChart from "@/views/home/components/LineChart";
import Sales from "@/views/home/components/Sales";
import PieChart from "@/views/home/components/PieChart";
import ChinaMap from "@/views/home/components/ChinaMap";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import BMap from "./components/BMap.vue";
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
}
.home-col {
  margin-bottom: 10px;
}
</style>

<style lang="scss">
.card-svg {
  margin-top: -1px;
  margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
  svg {
    padding-top: 4px;
  }
}
</style>

<style>
.card {
  margin-top: 20px;
}
</style>
